<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15-scroll</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function () {

            /**
             * 知识点：
             * 1. scrollTop():
             *      读取 / 设置滚动条的Y坐标
             * 2. $(document.body).scrollTop() + $(document.documentElement).scrollTop()
             *      读取页面滚动条的Y坐标(兼容 chrome 和 IE)
             * 3. $('body, html').scrollTop(60);
             *      滚动到指定位置(兼容 chrome 和 IE)
            */

            /**
             * 1. 得到div或页面滚动条的坐标
            */
            $('#btn1').click(function () {
                const divScrollTop = $('div').scrollTop()
                // const bodyScrollTop = $(document.body).scrollTop() + $(document.documentElement).scrollTop()
                // const bodyScrollTop = $('body').scrollTop() + $('html').scrollTop()
                const bodyScrollTop = $('body, html').scrollTop()
                console.log('divScrollTop:', divScrollTop)
                console.log('bodyScrollTop:', bodyScrollTop)
            })

            /**
             * 2. 让div或页面的滚动条滚动到指定位置
            */
            $('#btn2').click(() => {
                $('div').scrollTop(100)
                $('html, body').scrollTop(100)
            })

        })
    </script>
</head>

<body style="height: 2000px;">
    <div style="border:1px solid black;width:100px;height:150px;overflow:auto">
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        his is some text.
    </div>
    <br>
    <br>
    <br>
    <button id="btn1">得到scrollTop</button>
    <button id="btn2">设置scrollTop</button>
</body>

</html>